<template>
  <div class="container">
  <h3 style="margin:10px 20px;">流水列表</h3>
  <!-- 表格 -->
  <el-table
    ref="multipleTable"
    :data="arr" 
    tooltip-effect="dark"
    style="width: 100%"
    text-align:center
    @selection-change="handleSelectionChange">
    <!-- 多选框 -->
    <el-table-column
      type="selection"
      width="60">
    </el-table-column>
    <!-- 订单编号 -->
    <el-table-column
      prop="bnum"
      label="订单编号"
      width="220"
      show-overflow-tooltip>
    </el-table-column>
    <!-- 订单分类 -->
    <el-table-column
      prop="ordes"
      label="订单分类"
      width="120">
    </el-table-column>
    <!-- 标题  prop="name"-->
    <el-table-column
      label="标题"
      width="180">
      <template slot-scope="scope">
          <span>{{ inTypeName[scope.row.name] }}</span>
      </template>
    </el-table-column>
    <!-- 订单金额 -->
    <el-table-column
      prop="money"
      label="金额"
      width="150">
      <!-- 自定义拼接 -->
      <template slot-scope="scope">
          <span style="color:red;">￥ {{ scope.row.money }}.00</span>
      </template>
    </el-table-column>
    <!-- 订单状态  prop="status"-->
    <el-table-column
      
      label="订单状态"
      width="120">
       <template slot-scope="scope">
          <span>{{ inTypeObj[scope.row.status] }}</span>
      </template>
    </el-table-column>
    <!-- 下单时间 -->
    <el-table-column
      label="下单时间"
      width="200">
      <!-- 作用域插槽   可以更改样式  再次加工 自定义样式效果-->
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
  </el-table>
  <!-- 左下角删除按钮
 <el-button type="primary" @click="batchDeletFun">批量删除</el-button> -->

  </div>
</template>

<script>
import {batchDeleeApi}from'../../../api/financeApi'
export default {
     // 取余
     props:['arr'],
data() {
      return {
          //  映射
          inTypeObj:{
               0:'待支付',
               1:'已支付',
               2:'未支付',
               3:'支付异常',
          },
          inTypeName:{
               0:'幼儿英语课程',
               1:'幼儿绘画课程',
               2:'口才课程',
               3:'幼儿早教课程',

          },
        multipleSelection: []  //checkbox选中的数据
      }
    },
    methods:{
     //批量删除函数   可以用Bus通信  也可用父子和子父   用父当介质
     // 这里是page里的button  操作table数据
     batchData(id){
     console.log('调用到了');
     
     //发送请求  传参id字符串  注意，传递json形式，不能直接 传递数组 刷新表格
     var ids=''
    this.multipleSelection.forEach(item=>{
      ids +=item.id +','     //数组循环把id拼接成字符串  ids
    })  //数组循环  把id拼接成字符串
    // console.log(ids);  //发送请求 传递参数 后端删除 刷新表格
    batchDeleeApi({ids:ids}).then(res=>{
      
      console.log(res);  //刷新
      if(res.code==200){
        // 刷新表格
        this.$parent.resetTablefun()
        console.log('刷新成功');
      }
    })
     
     },
     //     全选事件   单选checkbox
         handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
     //  修改事件  
       handleEdit(index,row){
            console.log(index,row);
       },
     // 删除事件
     handleDelete(id){
          // 发送请求   把id传给后端  删除成功  刷新表格
          //  前后端删除都要用json字符串
           console.log(id);
           deleteFinanceApi({id:id}).then(res=>{
              console.log(res);
              if(res.code==200){
                // 刷新表格
                this.$emit('resetTablefun')
              }
            }) 
     }
     
    
    }
}
</script>

<style lang="less" scoped>
.container{
     margin-top:20px;
     background: pink;
     width: 100%;
     // text-align: center;
     display:flex;
     flex-direction: column;
     // justify-content: col;
     // vertical-align: center;

}
// 下方按钮
// .el-button--mini, .el-button--mini.is-round {
//     padding: 7px 15px;
//     width: 80px;
//     margin-left: 80px;
// }
  
     
     
     

 

</style>